<script setup>
import { inject, reactive, ref } from 'vue'
const appCurrentView = inject('appCurrentView');//app页面切换

const formData = ref({loginName:'', pwd:''});//表单数据
const loginForm = ref();//表单组件
function doSubmit() {
    console.log('doSubmit:', formData.value);
    //校验表单
    loginForm.value.validate((valid, fields) => {
        if (valid) {
            console.log('通过');
            //TODO login

            //成功后操作,存储登录用户的信息等
            //powerKey 是用户在主页的菜单权限,详见 Home.vue 中 doMenuLoading 方法.
            //模拟数据
            let powerKey = 1, name = '杰瑞';
            if(formData.value.loginName == 'admin') {
                powerKey = 2;
                name = '管理员汤姆';
            }
            //登录用户的基本信息, 主要需要 name, powerKey(权限标识), token(身份令牌)
            let login = {loginName: formData.value.loginName, name: name, powerKey: powerKey, token: 't123'};
            localStorage.setItem("login", JSON.stringify(login));
            appCurrentView.name = 'Home';

            return;
        }
        //错误提示自动出现在页面上
        //console.log('不通过', fields);
    });
}
function doReset() {
    loginForm.value.resetFields();
}

//表单校验规则
const fromRules = reactive({
    loginName: [
        {required: true, min:1,max:50, message:'请输入登录名', trigger: 'blur'}
    ],
    pwd: [
        {required: true, min:1, message:'请输入密码', trigger: 'blur'}
    ]
});
</script>
<template>
    <div class="login-container-dl" >
        <div class="login-box-dl">
            <div class="title-dl">登 录</div>
            <el-form :model="formData" label-position="top" ref="loginForm" :rules="fromRules" >
                <el-form-item label="登录名:" prop="loginName">
                    <el-input v-model="formData.loginName" />
                </el-form-item>
                <el-form-item label="密码:" prop="pwd">
                    <el-input type="password" v-model="formData.pwd" show-password @keyup.enter.exact="doSubmit" />
                </el-form-item>
                <el-form-item class="foot-item-dl">
                    <el-button size="large" type="primary" @click="doSubmit">登录</el-button>
                    <el-button size="large" @click="doReset()" >重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<style scoped>
.login-container-dl {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* background-color: #c1cbfa; */
    background: url('/bg1.jpg') no-repeat center/cover;
}
.login-box-dl {
    width: 400px;
    padding: 30px 40px 20px;
    border-radius: 10px;
    box-shadow: 10px 10px 20px 10px #ccc;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
}
.login-box-dl .title-dl {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}
.login-box-dl :deep(.el-form-item__content) {
    justify-content: center;
}
</style>